<template>
  <div class="map-tool" :class="'map-tool--' + layoutSkin ">
      <transition
        name="bounce rotate"
        enter-active-class="bounceInRight" leave-active-class="fadeOut">
          <a href="javascript:void(0)" class="roadnet" v-if="showSatelliteLayer"
          :class="{ 'active' : showRoadNetLayer }" @click="roadnet">
            <span class="icon"><icon-svg name="luwang"></icon-svg> </span>
            <span class="name">路网</span>
          </a>
      </transition>
      <div class="item">
        <a href="javascript:void(0)" class="satellite" style="border:0"
        :class="{ 'active' : showSatelliteLayer }" @click="satellite">
          <span class="icon"><icon-svg name="weixing"></icon-svg> </span>
          <span class="name">卫星</span>
        </a>
        <a href="javascript:void(0)" class="satellite" style="border:0"
        :class="{ 'active' : mesure }" @click="handle">
          <span class="icon"><icon-svg name="ceju"></icon-svg> </span>
          <span class="name">测距</span>
        </a>
        <!-- <el-popover
          width="100px"
          placement="bottom-start"
          popper-class="map-box-tools-popper"
          trigger="click">
            <div class="map-box__tools">
              <div class="item" v-for="(item,index) in toolBoxList" 
              :class="{ 'active': item.checked }"
              :key="index" @click="handle(item)">
                <icon-svg :name="item.icon"></icon-svg> {{ item.name }} 
              </div>
            </div>
            <a href="javascript:void(0)" class="satellite" slot="reference">
              <span class="icon"><icon-svg name="gongjuxiang"></icon-svg> </span>
              <span class="name">工具箱</span>
            </a>
        </el-popover>     -->
      </div>
  </div>
</template>

<script>
export default {
  inject: ['rootStore'],
  data() {
    return {
      showSatelliteLayer: false,
      showRoadNetLayer: false,
      mesure: false,
      mouseTool: null,
      toolBoxList: [
        // { name: '放大', icon: 'add', checked: false, id: 0 },
        // { name: '缩小', icon: 'minus', checked: false, id: 1 },
        { name: '测距', icon: 'ceju', checked: false, id: 2 }

      ]
    };
  },
  watch: {
    'rootStore.store.map'(map) {
      const AMap = this.store.AMap;
      this.mouseTool = new AMap.MouseTool(map);
    }
  },
  computed: {
    store() {
      return this.rootStore.store;
    },
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    }
  },
  methods: {
    satellite() {
      this.showSatelliteLayer = !this.showSatelliteLayer;
      console.log(this.rootStore.store);
      if (this.showSatelliteLayer) {
        this.store.defaultLayer.hide();
        this.store.satelliteLayer.setMap(this.store.map);
        this.store.satelliteLayer.show();
      } else {
        this.store.satelliteLayer.hide();
        this.store.defaultLayer.show();
        // this.map.setMapStyle(style);
      }
    },
    roadnet() {
      this.showRoadNetLayer = !this.showRoadNetLayer;
      if (this.showRoadNetLayer) {
        this.store.roadNetLayer.setMap(this.store.map);
        this.store.roadNetLayer.show();
      } else {
        this.store.roadNetLayer.hide();
      }
    },
    handle(item) {
      this.mesure = !this.mesure;
      if (this.mesure) {
        this.initMouseTool();
      } else {
        this.mouseTool.close(true);// 关闭，并清除覆盖物
      }
    },
    initMouseTool() {
      const AMap = this.store.AMap;
      this.mouseTool.rule({
        startMarkerOptions: {// 可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), // 图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png'
          })
        },
        endMarkerOptions: {// 可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), // 图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/end.png'
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        midMarkerOptions: {// 可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), // 图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/mid.png'
          }),
          offset: new AMap.Pixel(-9, -31)
        },
        lineOptions: {// 可缺省
          strokeStyle: 'solid',
          strokeColor: '#FF33FF',
          strokeOpacity: 1,
          strokeWeight: 2
        }
      });
    }
  }
};
</script>
<style lang="scss">
.map-box__tools{
  .item {
    cursor: pointer;
    line-height: 30px;
    display: flex;
    align-items: center;
    svg{
      font-size: 18px;
      margin-right: 6px;
    }
  }
}
</style>
<style lang="scss" scoped>
.map-tool{
    display: flex;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 999;
    height: 40px;
    line-height: 40px;
    background: white;
    color: #5f6477;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    padding: 0 10px;
    .roadnet{
      left: -84px;
      position: absolute;
      background: white;
      padding: 0 10px;
      display: flex;
      align-items: center;
      border-radius: 3px;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }
    .active{
      color: #00C0FF !important;
    }
    .item{
      font-size: 12px;
      cursor: pointer;
      display: flex;
      color: #5f6477;
      // align-items: center;
      // padding: 12px 0 what happened between us
    }
    .icon{
      display: flex;
      align-items: center;
    }
    a{
         display: flex;
    }
    a{
      color: #5f6477; 
      padding: 0 12px;
      // border-left: 1px #dbdee2 dashed;
    }
    a:focus, a:hover {
        text-decoration: none;
    }
    svg{
      font-size: 18px;
      margin-right: 6px;
    }
    &--dark{
        color: white;
        background-color: rgba(7, 75, 125, 0.5);
        .roadnet{
          background-color: rgba(7, 75, 125, 0.5);
        }
        a{
          color: white; 
        }
    }
}
</style>